<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>九宫格-第一步</title>
    <link rel="stylesheet" href="./reset.css">
    <style media="screen">
      body{
        padding: 50px;
      }
    </style>
  </head>
  <body>
      <ul class="grid">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </ul>
      <style media="screen">
        .grid{
          display: flex;
          flex-wrap: wrap;
          width: 300px;
        }
        .grid li{
          width: 100px;
          height: 100px;
          line-height: 100px;
          text-align: center;
        }
      </style>
  </body>
</html>
